import axios from 'axios'
import Cookies from 'js-cookie'
import { Button, Layout, Menu, Form, Input, DatePicker, message,Alert } from 'antd'
const { Header, Content, Footer } = Layout;
const { RangePicker } = DatePicker;

import { useState } from 'react'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 12 },
  },
};

const reqRule = { required: true, message:'必填' }


export default function Index({ existNames }) {
  const [loading, setLoading] = useState()

  const [form] = Form.useForm();

  const createTask = async () => {
    setLoading(true)
    const d = form.getFieldsValue()
    const [start, end] = d.rangeTime
    d.start_time = start.format('YYYY-MM-DD-H')
    d.end_time = end.format('YYYY-MM-DD-H')
    // 存一下username
    Cookies.set('username', d.username)
    const res = await axios.post('/api/createTask', d)
    if (res.status === 200) {
      message.success(<>提交成功<div>请及时更新cookie，以免爬虫被登录授权拦截。</div></>)
    } else {
      message.error('失败，请重试')
    }
    setTimeout(() => {
      setLoading(false)
    }, 2000)
  }

  const TopicTaskForm = () => {
    const initValue = { username: Cookies.get("username")}
    return <Form loading={loading} form={form} onFinish={onFinish} {...formItemLayout} initialValues={initValue}>
      <Form.Item name="username" label="用户名" required rules={[reqRule]}>
        <Input />
      </Form.Item>
      <Form.Item name="keyword" label="关键词-话题" required rules={[reqRule]}>
        <Input allowClear />
      </Form.Item>
      <Form.Item name="rangeTime" label="时间范围" required rules={[reqRule]} help={<Alert message="时间区间建议不超过5天！间隔越长，爬取越慢" type='warning' showIcon />}>
          <RangePicker showTime format="YYYY-MM-DD HH点"  allowClear />
        </Form.Item>
      <Form.Item name="cookie" label="Cookie" required rules={[reqRule]}>
        <Input.TextArea rows={4} allowClear/>
      </Form.Item>
      <Form.Item
          wrapperCol={{
            xs: { span: 24, offset: 0 },
            sm: { span: 16, offset: 4 },
          }}
        >
          <Button loading={loading} type="primary" size='large' htmlType="submit">
            提交
          </Button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Button size='large' htmlType="reset">
            重置
          </Button>
        </Form.Item>
    </Form>
  }

  const onFinish = async (d) => {
    try {
      await form.validateFields()
      await createTask()
    } catch (e) {
      console.log(e)
    }
  }


  return <Layout className="layout">
    <Header>
      <Menu theme="dark" mode="horizontal" selectedKeys={['1']} >
        <Menu.Item key="1">创建任务</Menu.Item>
        <Menu.Item>
          <a href='http://116.205.130.11:8080/' target='_blank'>文件列表</a>
        </Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <div className="site-layout-content"><div className='form-wrapper'>
      { TopicTaskForm()}</div></div>
    </Content>  
  </Layout>
}

export async function getStaticProps() {
  const existNames =['ghy'] 
  return {
    props: {
      existNames
    }
  }
}